<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交首页 - 多风格展示</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100vh;
      color: #333;
      transition: background-color 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      min-height: 100vh;
      padding-bottom: 70px;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏通用样式 */
    .navbar {
      padding: 12px 0;
      position: sticky;
      top: 0;
      z-index: 100;
      transition: all 0.3s;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-actions {
      display: flex;
      gap: 15px;
    }
    
    .nav-btn {
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;
    }
    
    /* 底部导航通用样式 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      z-index: 100;
      transition: all 0.3s;
    }
    
    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: inherit;
      text-decoration: none;
      font-size: 12px;
      gap: 5px;
      flex: 1;
      opacity: 0.7;
      transition: all 0.2s;
    }
    
    .nav-tab.active {
      opacity: 1;
      font-weight: 500;
    }
    
    .nav-tab i {
      font-size: 20px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #0d6efd;
    }
    
    /* 动态卡片通用样式 */
    .post-card {
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .post-header {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 15px;
    }
    
    .post-time {
      font-size: 12px;
      opacity: 0.7;
    }
    
    .post-content {
      padding: 0 15px 12px;
      font-size: 15px;
      line-height: 1.5;
    }
    
    .post-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
      margin-bottom: 12px;
    }
    
    .post-image {
      aspect-ratio: 1/1;
      object-fit: cover;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      font-size: 14px;
    }
    
    .post-action {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .post-action:hover {
      opacity: 0.8;
    }
    
    /* 故事栏通用样式 */
    .stories {
      padding: 15px 0;
      overflow-x: auto;
      display: flex;
      gap: 15px;
      scrollbar-width: none;
      margin-bottom: 10px;
    }
    
    .stories::-webkit-scrollbar {
      display: none;
    }
    
    .story-item {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    
    .story-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: relative;
    }
    
    .story-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .story-avatar.has-story::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 50%;
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      z-index: -1;
    }
    
    .story-avatar.add-story {
      background-color: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    
    .story-name {
      font-size: 12px;
      max-width: 70px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 搜索栏通用样式 */
    .search-bar {
      padding: 10px 15px;
      margin: 10px 0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
    }
    
    /* 风格1 - 简约白 */
    .style-1 {
      background-color: #f8f9fa;
    }
    
    .style-1 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      color: #333;
    }
    
    .style-1 .bottom-nav {
      background-color: white;
      border-top: 1px solid #eee;
      color: #666;
    }
    
    .style-1 .bottom-nav .nav-tab.active {
      color: #0d6efd;
    }
    
    .style-1 .post-card {
      background-color: white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .style-1 .post-actions {
      border-top: 1px solid #eee;
      color: #666;
    }
    
    .style-1 .search-bar {
      background-color: #e9ecef;
      color: #666;
    }
    
    /* 风格2 - 深色模式 */
    .style-2 {
      background-color: #121212;
      color: #e0e0e0;
    }
    
    .style-2 .navbar {
      background-color: #1e1e1e;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    
    .style-2 .bottom-nav {
      background-color: #1e1e1e;
      border-top: 1px solid #333;
    }
    
    .style-2 .bottom-nav .nav-tab.active {
      color: #7bb3ff;
    }
    
    .style-2 .post-card {
      background-color: #1e1e1e;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    
    .style-2 .post-actions {
      border-top: 1px solid #333;
    }
    
    .style-2 .search-bar {
      background-color: #333;
      color: #aaa;
    }
    
    /* 风格3 - 活力彩 */
    .style-3 {
      background-color: #fff5f7;
    }
    
    .style-3 .navbar {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      color: white;
    }
    
    .style-3 .bottom-nav {
      background-color: white;
      border-top: 1px solid #ffddee;
    }
    
    .style-3 .bottom-nav .nav-tab.active {
      color: #ff416c;
    }
    
    .style-3 .post-card {
      background-color: white;
      box-shadow: 0 2px 10px rgba(255,65,108,0.1);
    }
    
    .style-3 .post-actions {
      border-top: 1px solid #ffeff2;
      color: #666;
    }
    
    .style-3 .search-bar {
      background-color: white;
      box-shadow: 0 2px 8px rgba(255,65,108,0.1);
      color: #666;
    }
    
    /* 风格4 - 商务蓝 */
    .style-4 {
      background-color: #f0f7ff;
    }
    
    .style-4 .navbar {
      background-color: #0a4da2;
      color: white;
    }
    
    .style-4 .bottom-nav {
      background-color: white;
      border-top: 1px solid #e6f0ff;
    }
    
    .style-4 .bottom-nav .nav-tab.active {
      color: #0a4da2;
    }
    
    .style-4 .post-card {
      background-color: white;
      box-shadow: 0 2px 8px rgba(10,77,162,0.1);
    }
    
    .style-4 .post-actions {
      border-top: 1px solid #e6f0ff;
      color: #444;
    }
    
    .style-4 .search-bar {
      background-color: white;
      box-shadow: 0 2px 8px rgba(10,77,162,0.1);
      color: #444;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #f8f9fa; border: 1px solid #ddd;"></button>
    <button class="style-btn" data-style="2" style="background-color: #121212;"></button>
    <button class="style-btn" data-style="3" style="background: linear-gradient(45deg, #ff416c, #ff4b2b);"></button>
    <button class="style-btn" data-style="4" style="background-color: #0a4da2;"></button>
  </div>
  
  <!-- 风格1 - 简约白 -->
  <div class="page-container style-1 active" data-style="1">
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="container nav-container">
        <h1 class="nav-title">社交首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-plus"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <i class="fa fa-search"></i>
        <input type="text" class="search-input" placeholder="搜索内容、用户...">
      </div>
      
      <!-- 故事栏 -->
      <div class="stories">
        <div class="story-item">
          <div class="story-avatar add-story">
            <i class="fa fa-plus"></i>
          </div>
          <span class="story-name">添加故事</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像">
          </div>
          <span class="story-name">张明</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像">
          </div>
          <span class="story-name">李华</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像">
          </div>
          <span class="story-name">王芳</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像">
          </div>
          <span class="story-name">赵伟</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=5" alt="用户头像">
          </div>
          <span class="story-name">陈静</span>
        </div>
      </div>
      
      <!-- 动态列表 -->
      <div class="posts">
        <!-- 动态1 -->
        <div class="post-card">
          <div class="post-header">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">张明</div>
              <div class="post-time">今天 09:45</div>
            </div>
            <button class="nav-btn">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            今天天气真好，和朋友们一起去爬山了，风景太美了！#户外 #旅行
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/400/400?random=10" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=11" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=12" alt="动态图片" class="post-image">
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>24</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>8</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>3</span>
            </div>
          </div>
        </div>
        
        <!-- 动态2 -->
        <div class="post-card">
          <div class="post-header">
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">王芳</div>
              <div class="post-time">昨天 18:20</div>
            </div>
            <button class="nav-btn">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            分享一下我新做的蛋糕，味道不错哦！有喜欢烘焙的朋友吗？#美食 #烘焙
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/400/400?random=13" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=14" alt="动态图片" class="post-image">
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>56</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>12</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>5</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <a href="#" class="nav-tab active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-compass"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-plus-circle"></i>
        <span>发布</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-bell"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 风格2 - 深色模式 -->
  <div class="page-container style-2" data-style="2">
    <!-- 内容与风格1相同，样式通过CSS控制 -->
    <div class="navbar">
      <div class="container nav-container">
        <h1 class="nav-title">社交首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-plus"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="search-bar">
        <i class="fa fa-search"></i>
        <input type="text" class="search-input" placeholder="搜索内容、用户...">
      </div>
      
      <div class="stories">
        <div class="story-item">
          <div class="story-avatar add-story">
            <i class="fa fa-plus"></i>
          </div>
          <span class="story-name">添加故事</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像">
          </div>
          <span class="story-name">张明</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像">
          </div>
          <span class="story-name">李华</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像">
          </div>
          <span class="story-name">王芳</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像">
          </div>
          <span class="story-name">赵伟</span>
        </div>
      </div>
      
      <div class="posts">
        <div class="post-card">
          <div class="post-header">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">张明</div>
              <div class="post-time">今天 09:45</div>
            </div>
            <button class="nav-btn">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            今天天气真好，和朋友们一起去爬山了，风景太美了！#户外 #旅行
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/400/400?random=10" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=11" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=12" alt="动态图片" class="post-image">
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>24</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>8</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bottom-nav">
      <a href="#" class="nav-tab active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-compass"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-plus-circle"></i>
        <span>发布</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-bell"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 风格3 - 活力彩 -->
  <div class="page-container style-3" data-style="3">
    <!-- 内容结构相同，样式通过CSS控制 -->
    <div class="navbar">
      <div class="container nav-container">
        <h1 class="nav-title">社交首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-plus"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="search-bar">
        <i class="fa fa-search"></i>
        <input type="text" class="search-input" placeholder="搜索内容、用户...">
      </div>
      
      <div class="stories">
        <div class="story-item">
          <div class="story-avatar add-story">
            <i class="fa fa-plus"></i>
          </div>
          <span class="story-name">添加故事</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像">
          </div>
          <span class="story-name">张明</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像">
          </div>
          <span class="story-name">李华</span>
        </div>
      </div>
      
      <div class="posts">
        <div class="post-card">
          <div class="post-header">
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">王芳</div>
              <div class="post-time">昨天 18:20</div>
            </div>
            <button class="nav-btn">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            分享一下我新做的蛋糕，味道不错哦！有喜欢烘焙的朋友吗？#美食 #烘焙
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/400/400?random=13" alt="动态图片" class="post-image">
            <img src="https://picsum.photos/400/400?random=14" alt="动态图片" class="post-image">
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>56</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>12</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>5</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bottom-nav">
      <a href="#" class="nav-tab active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-compass"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-plus-circle"></i>
        <span>发布</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-bell"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 风格4 - 商务蓝 -->
  <div class="page-container style-4" data-style="4">
    <!-- 内容结构相同，样式通过CSS控制 -->
    <div class="navbar">
      <div class="container nav-container">
        <h1 class="nav-title">社交首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-plus"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="search-bar">
        <i class="fa fa-search"></i>
        <input type="text" class="search-input" placeholder="搜索内容、用户...">
      </div>
      
      <div class="stories">
        <div class="story-item">
          <div class="story-avatar add-story">
            <i class="fa fa-plus"></i>
          </div>
          <span class="story-name">添加故事</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像">
          </div>
          <span class="story-name">赵伟</span>
        </div>
        
        <div class="story-item">
          <div class="story-avatar has-story">
            <img src="https://picsum.photos/200/200?random=5" alt="用户头像">
          </div>
          <span class="story-name">陈静</span>
        </div>
      </div>
      
      <div class="posts">
        <div class="post-card">
          <div class="post-header">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">赵伟</div>
              <div class="post-time">3天前</div>
            </div>
            <button class="nav-btn">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            参加了行业峰会，收获满满！与各位同行交流学习，期待未来有更多合作机会。#行业动态 #交流
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/400/400?random=15" alt="动态图片" class="post-image">
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>89</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>23</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>11</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bottom-nav">
      <a href="#" class="nav-tab active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-compass"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-plus-circle"></i>
        <span>发布</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-bell"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-tab">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
      });
    });
    
    // 动态交互功能
    const postActions = document.querySelectorAll('.post-action');
    postActions.forEach(action => {
      action.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const countEl = this.querySelector('span');
        let count = parseInt(countEl.textContent);
        
        // 点赞功能
        if (icon.classList.contains('fa-thumbs-o-up')) {
          icon.classList.remove('fa-thumbs-o-up');
          icon.classList.add('fa-thumbs-up');
          // 根据当前风格设置点赞颜色
          const style = this.closest('.page-container').getAttribute('data-style');
          if (style === '1') icon.style.color = '#0d6efd';
          else if (style === '2') icon.style.color = '#7bb3ff';
          else if (style === '3') icon.style.color = '#ff416c';
          else if (style === '4') icon.style.color = '#0a4da2';
          countEl.textContent = count + 1;
        }
        // 其他交互可以在这里扩展
      });
    });
    
    // 故事点击效果
    const storyItems = document.querySelectorAll('.story-item:not(:first-child)');
    storyItems.forEach(item => {
      item.addEventListener('click', function() {
        alert('查看故事');
      });
    });
    
    // 添加故事点击效果
    document.querySelector('.story-item:first-child').addEventListener('click', function() {
      alert('创建新故事');
    });
  </script>
</body>
</html>
